<template>
  <div>
    <!--    <el-button type="primary" @click="delrouterall()">click</el-button>-->
    <div style="font: 20px bold ; margin: 0px 10px;">{{ dev.name }}</div>
    <hr style="margin: 20px 0 0 0">

    <div style="margin: 10px 0">
      <el-button size="small" type="primary" style="margin: 0 10px" @click="$router.back()"><i
          class="el-icon-back"></i>返回</el-button>
      <el-button size="small" icon="el-icon-refresh" type="primary" style="margin: 10px 10px"
                 slot="reference" @click="refreshAll">
        刷新当前值
      </el-button>
      <el-popconfirm
          title="确定要批量业务吗？"
          @confirm="sendBatchYewu">
        <el-button size="small" icon="el-icon-warning-outline" type="primary" style="margin: 10px 10px"
                   slot="reference">
          批量设置
        </el-button>
      </el-popconfirm>

<!--      <el-button size="small" type="primary" style="margin: 0 10px" @click="showNewForm">新增<i-->
<!--          class="el-icon-circle-plus"></i></el-button>-->
<!--      <el-popconfirm-->
<!--          confirm-button-text='确定'-->
<!--          cancel-button-text='取消'-->
<!--          icon="el-icon-info"-->
<!--          icon-color="red"-->
<!--          title="确定删除吗？"-->
<!--          @confirm="handleDelBatch"-->
<!--      >-->
<!--        <el-button size="small" type="danger" slot="reference" style="margin: 10px 10px">-->
<!--          批量删除-->
<!--          <i class="el-icon-remove-outline"></i>-->
<!--        </el-button>-->
<!--      </el-popconfirm>-->
      <div style="float: right">
        <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="请输入业务名"
                  suffix-icon="el-icon-search"
                  v-model="name"/>

        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>


    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="业务名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="寄存器地址" :label-width="formLabelWidth">
          <el-input v-model="form.location" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="业务类型" :label-width="formLabelWidth">-->
        <!--          <el-select v-model="form.specialtypeid" placeholder="请选择业务类型">-->
        <!--            <el-option-->
        <!--                v-for="item in specialtypeArr"-->
        <!--                :label="item.name"-->
        <!--                :value="item.id">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <el-form-item label="寄存器类型" :label-width="formLabelWidth">
          <el-select v-model="form.regtype" placeholder="请选择寄存器类型" @change="handleNewSelChange">
            <el-option label="线圈" :value="0"></el-option>
            <el-option label="离散输入" :value="1"></el-option>
            <el-option label="输入寄存器" :value="3"></el-option>
            <el-option label="保持寄存器" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型" :label-width="formLabelWidth">
          <el-select v-model="form.regdatatp" placeholder="请选择数据类型">
            <el-option
                v-for="item in form.datatypes"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="editFormVisible">
      <el-form :model="editform">
        <el-form-item label="业务名称" :label-width="formLabelWidth">
          <el-input v-model="editform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="寄存器地址" :label-width="formLabelWidth">
          <el-input v-model="editform.location" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="业务类型" :label-width="formLabelWidth">-->
        <!--          <el-select v-model="editform.specialtypeid" placeholder="请选择业务类型">-->
        <!--            <el-option-->
        <!--                v-for="item in specialtypeArr"-->
        <!--                :label="item.name"-->
        <!--                :value="item.id">-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
<!--        4个分区有只读区和读写区，并且命名为 : 0x、1x、3x、4x-->

<!--        0x：形象的叫做线圈（coil status）,意味着可读可写（获取状态，设置状态），用功能码01，05，15操作这部分的寄存器-->
<!--        1x：离散输入（inputs status），很明显这是一块只读区。只能用功能码02 操作-->
<!--        3x：输入寄存器（input registers），也是一块只读区，只能用功能码04操作-->
<!--        4x：保持寄存器（holding registers），这是一块可读可写的数据区，用功能码03、06、16 操作这部分的寄存器-->
<!--        ————————————————-->

<!--        版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。-->

<!--        原文链接：https://blog.csdn.net/syusyorin/article/details/134310453-->
        <el-form-item label="寄存器类型" :label-width="formLabelWidth">
          <el-select v-model="editform.regtype" placeholder="请选择寄存器类型" @change="handleEditSelChange">
            <el-option label="线圈" :value="0"></el-option>
            <el-option label="离散输入" :value="1"></el-option>
            <el-option label="输入寄存器" :value="3"></el-option>
            <el-option label="保持寄存器" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据类型" :label-width="formLabelWidth">
          <el-select v-model="editform.regdatatp" placeholder="请选择数据类型">
            <el-option
                v-for="item in editform.datatypes"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEidt">确 定</el-button>
      </div>
    </el-dialog>

    <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
              style="margin: 10px; width: 1600px" border stripe>
      <el-table-column width="50" type="selection">
      </el-table-column>
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>

      <el-table-column prop="id" label="ID" width="60" v-if="false">
      </el-table-column>
      <el-table-column prop="name" label="业务名" width="200">
      </el-table-column>

      <!--      <el-table-column prop="specialtypeObj.name" label="业务类型" width="200">-->
      <!--      </el-table-column>-->
      <el-table-column v-if="false" label="寄存器类型" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.regtype === 0">线圈</span>
          <span v-if="scope.row.regtype === 1">离散输入</span>
          <span v-if="scope.row.regtype === 3">输入寄存器</span>
          <span v-if="scope.row.regtype === 4">保持寄存器</span>
        </template>
      </el-table-column>
      <el-table-column label="数据类型" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.regdatatp === 2">16位无符号整数</span>
          <span v-if="scope.row.regdatatp === 3">16位整数</span>
          <span v-if="scope.row.regdatatp === 4">32位无符号整数</span>
          <span v-if="scope.row.regdatatp === 5">32位整数</span>
          <span v-if="scope.row.regdatatp === 8">32位float</span>
          <span v-if="scope.row.regdatatp === 1">bool</span>
        </template>
      </el-table-column>
      <el-table-column v-if="false" prop="location" label="寄存器地址" width="200">
      </el-table-column>
<!--      <el-table-column prop="devObj.name" label="所属设备" width="200">-->
<!--      </el-table-column>-->
      <el-table-column sortable prop="#" label="当前值" width="150">
        <template slot-scope="scope">
          <div v-if="scope.row.getvalstate==1"
               style="display: inline-block; width: 20px; height: 20px; background-color: red; border-radius: 50% "></div>
          <span v-if="scope.row.regdatatp == 1">
                    <span v-if="scope.row.bvalue == 1">开</span>
                    <span v-if="scope.row.bvalue == 0">关</span>
                  </span>
          <span v-if="scope.row.regdatatp == 2">{{ scope.row.nvalue }}</span>
          <span v-if="scope.row.regdatatp == 3">{{ scope.row.nvalue }}</span>
          <span v-if="scope.row.regdatatp == 4">{{ scope.row.nvalue }}</span>
          <span v-if="scope.row.regdatatp == 5">{{ scope.row.nvalue }}</span>
          <span v-if="scope.row.regdatatp == 8">{{ scope.row.nvalue }}</span>
          <el-button style="display: inline-block; float: right" size="mini" type="text"
                     @click="refreshyewu(scope.row)">刷新
          </el-button>
        </template>
      </el-table-column>
      <el-table-column sortable prop="#" label="设置值" width="120">
        <template slot-scope="scope">
          <el-input :ref="scope.row.id+scope.row.name" v-if="scope.row.regtype == 4"
                    v-model="scope.row.newnvalue"
                    :class="{ 'blink-border': scope.row.inputerrblink }"></el-input>
          <el-switch
              v-if="scope.row.regtype == 0"
              v-model="scope.row.newbvalue"
              active-color="#13ce66"
              inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="#" label="操作"  width="120">
        <template slot-scope="scope">
          <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定发送命令吗？"
              @confirm="sendyewu(scope.row)"
          >
            <el-button size="mini" type="primary" icon="el-icon-cpu" slot="reference"
                       :disabled="scope.row.isButtonDisabled">设置
            </el-button>
          </el-popconfirm>
          <!--                  <el-popconfirm-->
          <!--                      confirm-button-text='确定'-->
          <!--                      cancel-button-text='取消'-->
          <!--                      icon="el-icon-info"-->
          <!--                      icon-color="red"-->
          <!--                      title="确定发送命令吗？"-->
          <!--                      @confirm="sendyewu(scope.row)"-->
          <!--                  >-->
          <!--                    <el-button size="mini" type="primary" icon="el-icon-cpu" slot="reference" :disabled="true">发送-->
          <!--                    </el-button>-->
          <!--                  </el-popconfirm>-->
        </template>
      </el-table-column>
      <el-table-column prop="#" label="操作结果">
        <template slot-scope="scope">

          <!--                  <el-result  v-if="scope.row.result == 0"  icon="success" title="成功">-->
          <!--                  </el-result>-->
          <span v-if="scope.row.result == 0" style="color: green">
                    <el-icon color="green" class="el-icon-success"></el-icon>操作成功</span>
          <span :ref="scope.row.id+scope.row.name+'span'" style="color: red;cursor: pointer"
                v-if="scope.row.result == 1" :class="{ 'blink-text': scope.row.errmessageblink}"
                @click="$alert(scope.row.errormessage)">
                    <el-icon color="green" class="el-icon-error"></el-icon>失败,点击查看详情</span>
        </template>
      </el-table-column>

<!--      <el-table-column prop="#" label="操作">-->
<!--        <template slot-scope="scope">-->

<!--          <el-button size="small" type="primary" @click="showEditForm(scope.row)">编辑<i-->
<!--              class="el-icon-edit"></i></el-button>-->
<!--          &lt;!&ndash;              <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>&ndash;&gt;-->

<!--          <el-popconfirm-->
<!--              style="margin: 0 10px"-->
<!--              confirm-button-text='确定'-->
<!--              cancel-button-text='取消'-->
<!--              icon="el-icon-info"-->
<!--              icon-color="red"-->
<!--              title="确定删除吗？"-->
<!--              @confirm="handleDel(scope.row.id)"-->
<!--          >-->
<!--            <el-button size="small" type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i>-->
<!--            </el-button>-->
<!--          </el-popconfirm>-->
<!--          &lt;!&ndash;          <el-button size="small" type="success" slot="reference">业务类型配置 <i class="el-icon-set-up"></i>&ndash;&gt;-->
<!--          &lt;!&ndash;          </el-button>&ndash;&gt;-->

<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>


    <div class="block" style="padding: 5px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";


export default {
  created() {
    service.get('/dev/getById', {
      params: {
        id: this.$route.query.id
      }
    }).then(
        response => {
          if (response.data.code == 20000) {
            this.dev = response.data.data
            return service.get('/specialtype/getListBydevtypeid', {
              params: {
                devtypeid: this.dev.devtype
              }
            })
          }
        }
    ).then(
        response => {
          if (response.data.code == 20000) {
            this.specialtypeArr = response.data.data
          }
        }
    )
    this.load();
  },
  data() {
    return {
      devid: this.$route.query.id,
      dev: {},
      specialtypeid: null,
      name: null,
      specialtypeArr: [],
      // datatypes:[],


      tableData: [],
      selectedRows: [], // 用来存储选中行的数据
      pageSize: 10,
      total: 100,
      currentPage: 1,
      dialogFormVisible: false,
      editFormVisible: false,
      form: {
        name: '',
        location: null,
        devid: this.$route.query.id,
        regtype: null,
        regdatatp: null,
        datatypes: []
      },
      editform: {
        id: null,
        name: '',
        location: null,
        // specialtypeid: null,
        devid: this.$route.query.id,
        regtype: null,
        regdatatp: null,
        datatypes: []
      },

      formLabelWidth: '120px'
    }
  },
  methods: {
    load() {
      service.get('/reg/getpageWithObj', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.currentPage,
          name: this.name,
          devid: this.devid,
          specialtypeid: this.specialtypeid
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
              for (let i = 0; i < this.tableData.length; i++) {
                this.$set(this.tableData[i], 'nvalue', null) //设备的老的number值
                this.$set(this.tableData[i], 'bvalue', null)//设备的老的number值
                this.$set(this.tableData[i], 'result', null) // 用户操作后的结果是否成功，result：0成功，1失败
                this.$set(this.tableData[i], 'errormessage', null) //用户操作后的结果失败后的错误信息
                this.$set(this.tableData[i], 'newbvalue', null) //用户输入的bool新值
                this.$set(this.tableData[i], 'newnvalue', null) // 用户输入的number新值
                this.$set(this.tableData[i], 'inputerrblink', false) //input框出错后的闪烁控制，true闪烁，false不闪烁
                this.$set(this.tableData[i], 'errmessageblink', false) //错误文本信息提示闪烁控制，true闪烁，false不闪烁
                this.$set(this.tableData[i], 'getvalstate', null) //获取当前值的状态 0，正常，1出错
                this.$set(this.tableData[i], 'isButtonDisabled', true) //isButtonDisabled
              }
              this.refreshAll()
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },
    handleNewSelChange(val) {
      console.log(this.form.datatypes)
      if (val == 0 || val == 1) {//线圈 离散输入
        this.form.datatypes = [{id: 1, name: '布尔'}]
      } else if (val == 3 || val == 4) {//保持寄存器  输入寄存器
        this.form.datatypes = [{id: 2, name: '16位无符号整数'}, {id: 3, name: '32位无符号整数'}]

      }
      this.form.regdatatp = null
    },
    handleEditSelChange(val) {
      console.log(this.editform.datatypes)
      if (val == 0 || val == 1) {//线圈
        this.editform.datatypes = [{id: 1, name: '布尔'}]
      } else if (val == 3 || val == 4) {//保持寄存器
        this.editform.datatypes = [{id: 2, name: '16位无符号整数'}, {id: 3, name: '32位无符号整数'}]
      }
      this.editform.regdatatp = null
    },


    dwchange(dw) {
      console.log(this.editform.dwid)
    },

    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },

    showNewForm() {
      // this.form = {}
      this.form.regdatatp = null
      this.form.location = null
      this.form.name = null
      this.form.regtype = null
      this.form.datatypes = []
      this.dialogFormVisible = true
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    handleSave() {
      let saveform = {}
      saveform.name = this.form.name
      saveform.location = this.form.location
      // saveform.specialtypeid = this.form.specialtypeid
      saveform.devid = this.devid
      saveform.regtype = this.form.regtype
      saveform.regdatatp = this.form.regdatatp

      service.post('/reg/save', saveform).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('success!');
          this.dialogFormVisible = false
          this.load()
        } else {
          this.$message.error("error")
          this.dialogFormVisible = false
        }
      })
    },
    showConfirmForm(row) {

    },

    showEditForm(row) {
      // this.editform = {}
      this.editform.id = row.id
      this.editform.name = row.name
      this.editform.location = row.location
      // this.editform.specialtypeid = row.specialtypeid
      this.editform.devid = row.devid
      this.editform.regtype = row.regtype
      console.log('-----------------------------------')
      console.log(row.regtype)
      console.log(this.editform.regtype)
      this.editform.regdatatp = row.regdatatp
      if (this.editform.regtype == 1 || this.editform.regtype == 0) {
        this.editform.datatypes = [{id: 1, name: '布尔'}]
      } else if (this.editform.regtype == 3 || this.editform.regtype == 4) {
        this.editform.datatypes = [{id: 2, name: '16位无符号整数'}, {id: 4, name: '32位无符号整数'}]
      }
      this.editFormVisible = true

    },

    handleEidt() {
      let editformTmp = {}
      editformTmp.id = this.editform.id
      editformTmp.name = this.editform.name
      editformTmp.location = this.editform.location
      // editformTmp.specialtypeid = this.editform.specialtypeid
      editformTmp.regdatatp = this.editform.regdatatp
      editformTmp.regtype = this.editform.regtype
      service.post('/reg/edit', editformTmp).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('success!');
          this.editFormVisible = false
          this.load()
        } else {
          this.$message.error("error")
          this.editdialogFormVisible = false
        }
      })
    },
    handleDel(id) {
      service.delete('/reg?id=' + id).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error("error")
        }

      })
    },
    search() {
      this.load()
    },
    handleDelBatch() {
      service.post('/reg/delbatch', this.selectedRows).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error("error")
        }
      })
    },
    uploadFile(param) {
      //param中的file才是真正的文件体，用于传入axios上传方法的参数

      const header = {"content-type": "multipart/form-data"} //请求头设置，没必要加，axios看到formdata类型，会自动加上，
      let formData = new FormData();
      formData.append("file", param.file);
      service.post('/dev/import', formData).then(res => {
        if (res.data.code == 20000) {
          this.$message.success('导入成功!');
          this.load()
        } else {
          this.$alert(res.data.message, '导入错误！', {
            confirmButtonText: '确定',
          })
          this.load()
        }
      }, error => {
        this.$alert(error.message, '错误！', {
          confirmButtonText: '确定',
        })
      })
    },

    refreshAll() {
      for (let i = 0; i < this.tableData.length; i++) {
        this.refreshyewu(this.tableData[i])
      }
    },
    refreshyewu(row) {
      // console.log(row.yewusel)
      row.bvalue = null
      row.nvalue = null
      row.getvalstate = null
      row.newnvalue = null
      row.newbvalue = false
      row.errormessage = null
      row.result = null
      row.isButtonDisabled = true
      if (row.regtype == 0) {
        row.isButtonDisabled = false
      }
      if (row.regtype == 4) {
        row.isButtonDisabled = false
      }
      if (row.regtype == 1 || row.regtype == 0) {
        service.get('/dev/getBoolYewu',
            {params: {devid: this.$route.query.id, regid: row.id}})
            .then(response => {
                  if (response.data.code == 20000) {
                    row.bvalue = response.data.data
                    // this.$message.success(row.name + ": 操作成功"  )
                    // row.name = "dfd"
                  } else {
                    row.getvalstate = 1
                    // this.$message.error(row.name + ": " + response.data.message)
                  }
                }
            ).catch(error => {
              row.getvalstate = 1
              // this.$message.error(row.name + ": " + error.message)
            }
        )
      } else if (row.regtype == 3 || row.regtype == 4) {
        service.get('/dev/getNumberYewu',
            {params: {devid: this.$route.query.id, regid: row.id}})
            .then(response => {
                  if (response.data.code == 20000) {
                    row.nvalue = response.data.data
                    // row.name = "dfd"
                  } else {
                    row.getvalstate = 1
                    // this.$message.error(row.name + ": " + response.data.message)
                  }
                }
            ).catch(error => {
              row.getvalstate = 1
              // this.$message.error(row.name + ": " + error.message)
            }
        )
      }

    },

    sendyewu(row) {
      console.log(row.regtype)
      // row.valtype = null
      // row.regtype = null
      // row.bvalue = null
      // row.nvalue = null
      // row.newnvalue = null
      // row.newbvalue = false
      row.errormessage = null
      row.result = null

      // if (row.yewusel == null) {
      //   this.$message.error(row.name + ": 未选择功能")
      //   return
      // }


      if (row.regtype == 0) {//线圈
        if (row.newbvalue == null) {
          this.$message.error(row.name + ": 请输入新值")
          return
        }
        service.get('/dev/setBoolYewu',
            {params: {devid: this.$route.query.id, regid: row.id, bvalue: row.newbvalue}})
            .then(response => {
                  if (response.data.code == 20000) {
                    row.result = 0
                    row.bvalue = response.data.data
                    this.$message.success(row.name + ": 操作成功")
                  } else {
                    row.result = 1
                    row.errormessage = response.data.message
                    //操作结果错误信息闪烁
                    row.errmessageblink = true
                    setTimeout(() => {
                      row.errmessageblink = false
                    }, 3000)
                    this.$message.error(row.name + ": " + response.data.message)
                  }
                }
            ).catch(error => {
              row.result = 1
              row.errormessage = error.message
              //操作结果错误信息闪烁
              row.errmessageblink = true
              setTimeout(() => {
                row.errmessageblink = false
              }, 3000)
              this.$message.error(row.name + ": " + error.message)
            }
        )
      } else if (row.regtype == 4) {//holdingregister
        if (row.newnvalue == null) {
          this.$message.error(row.name + ": 请输入新值")
          //让input框获取焦点，并且边框闪烁3s
          let oldborder = this.$refs[row.id + row.name].$el.style.border
          this.$refs[row.id + row.name].$el.style.border = '1px solid red'
          row.inputerrblink = true
          setTimeout(() => {
            //这里的if判断是为了解决，当用户切换其他菜单时，这个组件会被销毁，那么该组件中的内容会被vue销毁，
            // 就会出现this.$refs[row.id + row.name]为undefined错误
            if (this.$refs[row.id + row.name]) {
              this.$refs[row.id + row.name].$el.style.border = oldborder
              row.inputerrblink = false
            }
          }, 3000)
          return
        }
        // if (!row.newnvalue.match(/^[0-9]+(.[0-9]+)?$/)) {
        if (!row.newnvalue.match(/^(\-|\+)?\d+(\.\d+)?$/)) {
          this.$message.error(row.name + ": 新值必须为正数")
          //让input框获取焦点，并且边框闪烁3s
          this.$refs[row.id + row.name].focus()
          this.$refs[row.id + row.name].select()
          let oldborder = this.$refs[row.id + row.name].$el.style.border
          this.$refs[row.id + row.name].$el.style.border = '1px solid red'
          row.inputerrblink = true
          setTimeout(() => {
            //这里的if判断是为了解决，当用户切换其他菜单时，这个组件会被销毁，那么该组件中的内容会被vue销毁，
            // 就会出现this.$refs[row.id + row.name]为undefined错误
            if (this.$refs[row.id + row.name]) {
              this.$refs[row.id + row.name].$el.style.border = oldborder
              row.inputerrblink = false
            }
          }, 3000)
          // let oldborder = this.$refs[row.id+row.name].$el.style.border
          // //边框红色闪烁2S
          // setTimeout(()=>{
          //   this.$refs[row.id+row.name].$el.style.border = "1px solid red"
          // },500)
          // setTimeout(()=>{
          //   this.$refs[row.id+row.name].$el.style.border = oldborder
          // },1000)
          // setTimeout(()=>{
          //   this.$refs[row.id+row.name].$el.style.border = "1px solid red"
          // },1500)
          // setTimeout(()=>{
          //   this.$refs[row.id+row.name].$el.style.border = oldborder
          // },2000)
          // this.$refs[row.id+row.name].$el.style.border = "1px solid red"
          return
        }
        service.get('/dev/setNumberYewu',
            {params: {devid: this.$route.query.id, regid: row.id, nvalue: row.newnvalue}})
            .then(response => {
                  if (response.data.code == 20000) {
                    row.result = 0 //0表示成功
                    row.nvalue = response.data.data
                    this.$message.success(row.name + ": 操作成功")
                  } else {
                    row.result = 1 //1表示失败
                    row.errormessage = response.data.message
                    //操作结果错误信息闪烁
                    row.errmessageblink = true
                    setTimeout(() => {
                      row.errmessageblink = false
                    }, 3000)
                    this.$message.error(row.name + ": " + response.data.message)
                  }
                }
            ).catch(error => {
              row.result = 1
              row.errormessage = error.message
              //操作结果错误信息闪烁
              row.errmessageblink = true
              setTimeout(() => {
                row.errmessageblink = false
              }, 3000)
              this.$message.error(row.name + ": " + error.message)
            }
        )

      }

    },
    sendBatchYewu() {
      // console.log("=============")
      if (this.selectedRows.length == 0) {
        this.$message.error('请选择设备!')
        return
      }
      for (let i = 0; i < this.selectedRows.length; i++) {
        this.sendyewu(this.selectedRows[i])
      }

    },

  }
}
</script>

<style scoped>


.blink-border {
  animation: borderblink-animation 1s linear infinite;
}

@keyframes borderblink-animation {
  0% {
    border-color: transparent;
  }
  50% {
    border-color: red;
  }
  100% {
    border-color: transparent;
  }
}

.blink-text {
  animation: textblink-animation 1s linear infinite;
}

@keyframes textblink-animation {
  0% {
    color: transparent;
  }
  50% {
    color: red;
  }
  100% {
    color: transparent;
  }
}

</style>
